<template>
  <div class="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import GUI from "lil-gui";
import axios from 'axios';
//相机跟随
const cesiumContainer = ref(null);
let model = reactive({});
let scene = reactive({});
let viewer = reactive({});
let billboards = reactive({});
const operation = {
  value: "",
  selectOptions: {
    // 基本添加: "addBillboard",
  },
};
// let currentInstance = getCurrentInstance();
let gui = new GUI();
gui
  .add(operation, "value", operation.selectOptions)
  .name("相机跟随")
  .onChange((e) => {
    console.log("相机跟随");
    scene.primitives.removeAll();
  });

// 相当于密钥，申请使用下边链接中的数据时需要用到
// Cesium.Ion.defaultAccessToken =
//   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyOTQ0YTExZS02N2Y4LTQ2OTMtOWQ4NS1mNzE3ZWMwYTNmNmEiLCJpZCI6NDM1OCwiaWF0IjoxNjI4MTQzMjE1fQ.csECCT352LHVhak2sJlWYXw_gr7U-AqdQ9UMvtfOeg8";

class Texture {
  constructor(viewer) {
    this.viewer = viewer;
    this.dataSource = null;
    this.scene = viewer.scene;
    this.url="/public/img/dchb.jpg"
    this.objectUrl=null;
    this.addPloygon();
  }



  addPloygon() {
    axios.get(this.url, { responseType: 'blob' })
    .then(response => {
      // 创建一个对象 URL 来显示图片
      this.objectUrl = URL.createObjectURL(response.data);
      console.log("透明的的",this.objectUrl);

      this.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: [this.createGeometryInstance()],
          appearance:this.createAppearance(),
        })
      );


    });




    


    // Cesium.Entity({
    //   geometry:new Cesium.SphereGeometry({radius:1000000}),
    //   material:this.creatTexture()
    // })
  }
  createGeometryInstance(){
      return new Cesium.GeometryInstance({
        geometry: this.createGeometry(),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5)),
          // material: new Cesium.ColorMaterialProperty(Cesium.Color.LIGHTSKYBLUE.withAlpha(0.5))
        }
    });
  }
  createGeometry(){
    return Cesium.CoplanarPolygonGeometry.fromPositions({
      vertexFormat:Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat,
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        119,40,10,
        119,39,10,
        120,39,10,
        120,40,10,
      ]),
    })
  }
  createAppearance(){ 
    // MaterialAppearance
    
    return new Cesium.MaterialAppearance({
      flat:true,
      //new Cesium.ImageMaterialProperty({image:this.objectUrl }),///
          material:this.creatTexture(),// Cesium.Material.fromType("Stripe"),//Stripe|Checkerboard
          materialSupport: Cesium.MaterialAppearance.MaterialSupport.TEXTURED,
          translucent: true,
          renderState: {
            // 设置像素格式为 RGBA，以支持透明通道
            pixelFormat: Cesium.PixelFormat.RGBA
        }
        })
  }
  creatTexture(){
    // let url="/public/img/dchb.jpg";
    // let imgProvider=new Cesium.ImageryProvider({
    //   url,
    //   preload:true,
    // })  
   return  new Cesium.Material({
        fabric: {
          type: "Image",
          uniforms: {
            image: this.objectUrl,
            transparent: true // 设置透明通道
          },
        },
      })
  }
}

onMounted(async () => {
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
    fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
    vrButton: false, // 如果设置为false，将不会创建VR应用场景
    geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
    homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
    infoBox: false, // 是否显示点击要素之后显示的信息,cesium中的沙盒开关
    sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
    selectionIndicator: false, // 获取当选定实体更改时引发的事件。
    navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
    navigationInstructionsInitiallyVisible: false, // 如果帮助说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
    timeline: true, // 如果设置为false，则不会创建正下方时间轴小部件。
    scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
    animation: true, // 如果设置为false，将不会创建左下角动画小部件。
    shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
    // ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
    fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
    shadows: true,
  });

  //获取场景对象
  scene = viewer.scene;

  scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(119, 40, 1000000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });

  //添加路径
  new Texture(viewer);

  const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction((e) => {
    const pick = scene.pick(e.endPosition);
    if (
      Cesium.defined(pick) &&
      Cesium.defined(pick.node) &&
      Cesium.defined(pick.mesh)
    ) {
      console.log(`node:${pick.node.name},mesh:${pick.mesh.name}`);
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
</script> 
<style scoped>
.cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>
